<template>
    <div class="okumasan-room">
        <ItemDetail :show.sync="showModal" :value="item" :title="`${action} Item`" :id="itemID" @submit="confirmSubmit" :action="action" ></ItemDetail>
        <div class="row">
            <div class="col-md-12">
                <filter-form v-if="filters.length" :columns="filters" @submit="submit"></filter-form>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="panel">
                    <div class="panel-heading">
                        Okumasan Room List
                        <span> / <span class="text-primary">{{total}}</span> items</span>
                        <ul class="side-icon-text pull-right">
                            <li @click="addItem" style="cursor: pointer;">
                                <span class="circle circle-sm bg-info di">
                                <i class="fif fif-plus">
                                </i></span>
                            </li>
                        </ul>
                    </div>
                    <div class="table-responsive">
                        <item-table :columns="defaultColumns" :data="data" :loading="tableLoading" @sort="sort">
                            <template slot="physical_room_id" slot-scope="props">
                                <a :href="`#/physicalroomcalendar/${props.item.physical_room_id}`" target="_blank">
                                    {{props.item.physical_room_id}}
                                </a>
                            </template>
                            <template slot="actions" slot-scope="props">
                                <button type="button" class="btn btn-info btn-outline btn-circle btn-md m-r-5" @click="editItem(props)">
                                    <i class="fif fif-edit"></i>
                                </button>
                                <button type="button" class="btn btn-danger btn-outline btn-circle btn-md m-r-5" @click="deleteItem(props)">
                                    <i class="fif fif-delete"></i>
                                </button>
                            </template>
                        </item-table>
                    </div>
                    <div style="padding: 5px 10px;">
                        <v-paginate :pageCount="pageCount" :page="page" @change="changePage"></v-paginate>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    // components
    import vSelect from 'vue-select'
    import vPaginate from '@/components/widgets/Pagination'
    import ItemTable from '@/components/widgets/ItemTable'
    import ItemDetail from '@/components/widgets/ItemDetail'
    import FilterForm from '@/components/widgets/FilterForm'
    // utlis
    import {toJsonData} from '@/utils'
    // mixin
    import {lifeHookMixin, itemMixin} from '@/mixins/item'

    export default {
        name: "OkumasanRoom",
        components: {vSelect, vPaginate, ItemTable, FilterForm, ItemDetail},
        mixins: [lifeHookMixin, itemMixin],
        methods: {

        },
    }
</script>

<style scoped>

</style>